@import "../base"
.GameItemDetail

  .game_flex_column
    color: #f6f8fa
    background: #303638
    display: flex
    width: 100%
    justify-content: center
    flex-direction: column
    align-items: center


  .game_header
    width: 80%
    justify-content: center
    display: flex
    flex-direction: row
    background: linear-gradient(70deg, #1f1f1f, #192a41)
    align-items: center

    .game_name
      text-align: center
      padding: 20px
      font-size: 30px
      color: #ffffff
      width: 30%

    img
      width: 400px

    .game_header_column
      display: flex
      flex-direction: column
      padding: 20px
      width: 50%
      justify-content: stretch

      .game_header_short
        margin-bottom: 20px
        font-size: $font_size *0.9
        color: #dedede

      .game_header_info
        color: #67c1f5
        margin: 1px

        label
          color: #67c1f5
          float: right


  .game_user_op
    width: 100%
    display: flex
    flex-direction: column
    align-items: center

    .game_movie
      padding-top: 10px
      display: block
      width: 80%
      background: linear-gradient(90deg, #171c1c 50%, #171818 95%)

    .game_price
      display: flex
      flex-direction: column
      width: 80%
      background: linear-gradient(81deg, #383d3d 30%, #090808 70%)

      .game_name_link
        display: flex
        flex-direction: row
        padding: 10px
        align-items: center

        svg
          width: 40px

          path
            fill: #000000
        &:hover
          path
            fill: rgb(77, 135, 148)
        a
          color: #c7e3ff
          font-size: 30px
          min-width: 300px

      .game_own_state
        display: flex
        flex-direction: row
        justify-content: space-between
        align-items: center

        .loginButton
          text-align: center
          background: rgba(103, 193, 245, 0.2)
          font-size: $font_size
          color: #67c1f5 !important
          width: 100px
          padding: 10px
          margin: 10px 0 0 10px

          &:hover
            cursor: pointer
            background: rgba(87, 113, 126, 0.2)

        .game_is_disabled
          color: #e02a42
          padding: 5px
          margin-left: auto
          font-size: 50px
          display: block

        .game_purchase_discount
          display: flex
          flex-direction: row
          align-items: center
          justify-content: flex-end
          padding: 5px
          margin-left: auto
          font-size: 50px

          .inWishList
            padding: 0 10px
            color: #6ff366
            border-radius: 10px

        .game_purchase_discount_bg
          margin-right: 10px
          margin-bottom: 10px
          display: flex
          flex-direction: row
          align-items: center
          font-size: $font_size * 2
          box-shadow: 2px 2px 10px 10px rgb(52, 52, 52)
          transition-duration: 1s

          &:hover
            box-shadow: 2px 2px 10px 10px rgb(88, 151, 183)

          .addToWishlistBtn
            cursor: pointer
            display: block
            text-decoration: none !important
            font-size: $font_size * 1.5
            color: white
            background: linear-gradient(to bottom, #6fa720 5%, #588a1b 95%)
            text-align: center
            line-height: 50px
            margin: 2px

            &:hover
              background: linear-gradient(#96e02e 5%, #4d5e36 95%)


          .discount_pct
            color: #BEEE11
            background: #4c6b22
            font-weight: bold
            height: 50px
            padding: 0 0 0 10px

          .discount_prices
            padding: 0 10px 0 10px
            color: #BEEE11
            background: #738895
            position: relative
            display: inline-block
            vertical-align: top
            font-size: $font_size *1.2
            height: 50px

            .game_price_final
              padding-top: 5px
              color: #BEEE11
              line-height: 16px

            .game_price_init
              width: fit-content
              color: #a4bac7
              left: auto
              font-size: $font_size *1

              &:before
                content: ''
                left: 0
                right: 0
                position: absolute
                top: 20%
                border-bottom: 1.5px solid #738895
                transform: skewY(-10deg)
                box-shadow: 0 0 2px black

        .discount_free
          font-size: $font_size *2
          padding-top: 8px
          padding-left: 12px
          padding-right: 12px

      .game_you_have
        font-size: $font_size *  2
        font-weight: bold

        background: linear-gradient(81deg, #37434d 30%, rgba(40, 63, 63, 0.58) 70%)

        .game_have_name
          text-transform: uppercase
          color: #0beffa
          padding: 20px
          font-size: 30px
          min-width: 300px
          border: 3px solid #000000
          cursor: pointer

$right_padding: 14px

.game_page_content
  font-size: $font_size
  display: flex
  flex-direction: row
  justify-content: space-between
  background: rgb(47, 47, 47)
  width: 80%

  .title
    font-size: $font_size *1.5
    color: #e7e7e7
    padding: 10px

  .game_about_the_game
    width: 40%
    color: #b0b0b0
    background: #2a2a2a
    padding: 20px

    a
      color: #58acb0

    img
      max-width: 250px
      float: left
      padding: 10px


  .game_content_center
    width: 30%
    background: #1a1a1a

    .legal_notice
      color: #585e62
      padding: 20px
      font-size: $font_size * 0.7

    .game_reviews
      color: #929ea6
      background: #232323
      padding: 20px
      font-size: $font_size

      a
        color: #7a8aaf


  .game_content_right
    width: 30%
    display: flex
    flex-direction: column
    align-content: space-around

    .game_languages

      padding: $right_padding
      float: right
      display: flex
      flex-direction: column
      background: #252525

      table
        color: #8f98a0
        font-size: $font_size * 0.9

        tr

          &:nth-child(2n+1)
            background: #2d2d2d

          th
            padding: 2px

          td
            border-bottom: 1px solid #575757

            &:empty
              border-bottom: 1px solid #252525

            span
              width: 100%
              height: 100%
              display: inline-table
              text-align: center
              float: left
              color: #67c1f5


    .achievements
      .achievement_img
        display: flex
        flex-direction: row
        flex-wrap: wrap

        img
          width: 50px
          padding: 0 0 10px 10px

.game_genres
  background: #565656
  color: #66c0f4
